<template>
    <div class="emergency-contact-form">
        <h3 class="form-title">紧急联系人信息</h3>
        <div class="contact-fields">
            <el-form-item label="紧急联系人" class="form-item">
                <el-input v-model="contact.emergency_contact" class="form-input" placeholder="请输入紧急联系人姓名" />
            </el-form-item>

            <el-form-item label="联系电话" class="form-item">
                <el-input v-model="contact.emergency_phone" class="form-input" placeholder="请输入紧急联系人电话"
                    maxlength="11" />
            </el-form-item>

            <el-form-item label="关系" class="form-item">
                <el-input v-model="contact.relationship" class="form-input" placeholder="请输入与紧急联系人关系" />
            </el-form-item>
        </div>

        <div class="form-hint">
            <el-icon class="hint-icon">
                <InfoFilled />
            </el-icon>
            <span>请填写能够及时联系到的亲属或朋友信息，以便紧急情况下联系</span>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, watch } from 'vue';
import { InfoFilled } from '@element-plus/icons-vue';

// 接收父组件传递的联系人信息
const props = defineProps({
    contact: {
        type: Object,
        required: true,
        default: () => ({
            emergency_contact: '',
            emergency_phone: '',
            relationship: ''
        })
    }
});

// 定义事件
const emit = defineEmits(['update:contact']);

// 监听联系人信息变化并通知父组件
watch(
    () => props.contact,
    (newVal) => {
        emit('update:contact', { ...newVal });
    },
    { deep: true }
);
</script>

<style scoped>
.emergency-contact-form {
    background-color: var(--bg-color-common);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-title {
    color: var(--text-color-menu);
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-common);
}

.contact-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
}

.form-item {
    margin-bottom: 0;
}

.form-input {
    width: 100%;
    border-color: var(--border-color-input);
}

.form-input:focus {
    border-color: var(--border-color-input-focus);
}

.form-hint {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: rgba(94, 146, 198, 0.1);
    border-left: 3px solid var(--border-color-focus);
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-color-tip);
}

.hint-icon {
    margin-right: 8px;
    font-size: 14px;
}
</style>